<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本资料</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">

    <link th:href="@{/self/self-common.css}" rel="stylesheet">

    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.css}" rel="stylesheet">

    <style type="text/css">
        .ibox-title-gray {
            height: 41px;
            background-color: #7459d9;
            padding: 13px !important;
            min-height: 40px;
            color: #FFF;
            border-radius: initial !important;
            border-top-left-radius: 3px !important;
            border-top-right-radius: 3px !important;
        }

        .list-group-item {
            padding: 12px 15px;
        }

        .list-group-item:nth-of-type(odd) {
            background-color: #f9f9f9;
        }

        .tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:hover, .tabs-container .nav-tabs > li.active > a:focus {
            border-top: 1px solid #e7eaec;
        }

        .tabs-container .tab-content {
            border: none
        }

        .panel-body .form-group {
            display: flex;
            padding: 8px 0;
            margin: 0;
            line-height: 34px;
            text-align: right;
        }
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{color:#7459d9}
    </style>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">

        <div class="col-sm-5" style="padding-right: 0;">
            <div class="ibox">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>
                        <i class="fa fa-bookmark"></i>
                        基本资料
                    </h5>
                </div>
                <div class="ibox-content iboxContentMinHeight">
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item"><i class="fa fa-list"></i>
                            <b class="font-noraml">员工工号：</b>
                            <p class="pull-right" id="fnumber"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml">员工名称：</b>
                            <p class="pull-right" id="fname"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-venus-double"></i>
                            <b class="font-noraml">性别：</b>
                            <p class="pull-right" id="fgender"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-phone"></i>
                            <b class="font-noraml">联系方式：</b>
                            <p class="pull-right" id="fphone"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-users"></i>
                            <b class="font-noraml">职务：</b>
                            <p class="pull-right" id="fduty"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-magic"></i>
                            <b class="font-noraml">技能：</b>
                            <p class="pull-right" id="fskill"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-newspaper-o"></i>
                            <b class="font-noraml">部门：</b>
                            <p class="pull-right" id="department"></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-calendar-o"></i>
                            <b class="font-noraml">备注：</b>
                            <p class="pull-right" id="fnote"></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-7">
            <div class="ibox">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>
                        <i class="fa fa-bookmark"></i>
                        修改信息
                    </h5>
                </div>
                <div class="ibox-content iboxContentMinHeight">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">基本资料</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">修改密码</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">

                                    <div class="col-md-12">
                                        <div class="form-group ui-sortable-helper">
                                            <label class="col-sm-3 control-label">员工工号：</label>
                                            <div class="col-sm-7">
                                                <input id="fnumberUpdate" type="text" name="" class="form-control"
                                                       placeholder="" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">员工名称：</label>
                                            <div class="col-sm-7">
                                                <input id="fnameUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入人员名称">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别：</label>
                                            <div class="col-sm-7">
                                                <select id="fgenderUpdate" class="selectpicker show-tick"
                                                        data-live-search="true" title="选择性别">
                                                    <option value="1068">男</option>
                                                    <option value="1069">女</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">联系方式：</label>
                                            <div class="col-sm-7">
                                                <input id="fphoneUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入联系方式">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">职务：</label>
                                            <div class="col-sm-7">
                                                <input id="fdutyUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入职务" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">技能：</label>
                                            <div class="col-sm-7">
                                                <input id="fskillUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入技能">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">部门：</label>
                                            <div class="col-sm-7">
                                                <input id="departmentUpdate" type="text" name="" class="form-control"
                                                       placeholder="" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">备注：</label>
                                            <div class="col-sm-7">
                                                <input id="fnoteUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入备注">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-12 textAlignCenter">
                         <!--                       <button type="button" class="btn btn-white btn-close"
                                                        data-dismiss="modal">取消
                                                </button>-->
                                                <button type="button" class="btn btn-purple btn-save" id="btnInfoSave">
                                                    保存
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                    <div class="col-md-12">
                                        <div class="form-group ui-sortable-helper">
                                            <label class="col-sm-3 control-label">原密码：</label>
                                            <div class="col-sm-7">
                                                <input id="oldPasswordUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入原密码">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">新密码：</label>
                                            <div class="col-sm-7">
                                                <input id="newPasswordUpdate" type="text" name="" class="form-control"
                                                       placeholder="请输入新密码">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">确认密码：</label>
                                            <div class="col-sm-7">
                                                <input id="confirmPasswordUpdate" type="text" name=""
                                                       class="form-control"
                                                       placeholder="确认密码">
                                            </div>
                                        </div>

                                        <div class="form-group" style="margin:0 auto">
                                            <div class="col-sm-12 textAlignCenter">
                   <!--                             <button type="button" class="btn btn-white btn-close"
                                                        data-dismiss="modal">取消
                                                </button>-->
                                                <button type="button" class="btn btn-purple btn-save"
                                                        id="btnPasswordSave">保存
                                                </button>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--提示框-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!--下拉选择框-->
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<!--日期-->
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<!--bootstrap导出-->
<script th:src="@{/js/plugins/bootstrap-table-export/bootstrap-table-export.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/tableExport.js}"></script>

<script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script>

    var userId = '';
    var personnelId = '';
    $(function () {
        var personnel;
        PostWebApi("getPersonnel", function (data) {
            if (data.code === 0) {
                personnel = data.data;
                userId = personnel.userId;
                personnelId = personnel.personnelId;
                getInfo(userId)
            }
        });

        function getInfo(id) {
            PostWebApi("queryUserById", {id: id}).done(function (data) {
                if (data.code === 0) {
                    var info = data.data;
                    var sex;
                    if (info.fgender == '1068') {
                        sex = '男'
                    } else if (info.fgender == '1069') {
                        sex = '女';
                    }
                    $("#fnumber").text(info.fnumber)
                    $("#fname").text(info.fname)
                    $("#fgender").text(sex)
                    $("#fphone").text(info.fphone);
                    $("#fduty").text(info.fduty);
                    $("#fskill").text(info.fskill);
                    $("#department").text(info.department);
                    $("#fnote").text(info.fnote);

                    $("#fnumberUpdate").val(info.fnumber)
                    $("#fnameUpdate").val(info.fname)
                    $("#fgenderUpdate").val(info.fgender)
                    $("#fgenderUpdate").selectpicker('refresh');

                    $("#fphoneUpdate").val(info.fphone);
                    $("#fdutyUpdate").val(info.fduty);
                    $("#fskillUpdate").val(info.fskill);
                    $("#departmentUpdate").val(info.department);
                    $("#fnoteUpdate").val(info.fnote);

                }
            })
        }

        $("#btnInfoSave").click(function () {
            var fname = $.trim($("#fnameUpdate").val());
            var fgender = $("#fgenderUpdate").val();
            if (!fgender) {
                layer.msg("请选择人员性别");
                return;
            }
            var fphone = $("#fphoneUpdate").val();
            var fskill = $("#fskillUpdate").val();
            var fnote = $("#fnoteUpdate").val();
            PostWebApi("updateUser", {
                id: userId,
                fname: fname,
                fgender: fgender,
                fphone: fphone,
                fskill: fskill,
                fnote: fnote,
            }).done(function (data) {
                if (data.code == 0) {
                    layer.msg("修改成功");
                    getInfo(userId);
                } else {
                    layer.msg(data.msg);
                }
            })
        })


    })

    /* 更改密码 */
    $("#btnPasswordSave").click(function () {
        var oldPassword = $("#oldPasswordUpdate").val();
        var newPassword = $("#newPasswordUpdate").val();
        var confirmPassword = $("#confirmPasswordUpdate").val();


        if (oldPassword === "") {
            layer.msg('请输入原密码');
            return false;
        }

        if (newPassword === "") {
            layer.msg('请输入新密码');
            return false;
        }

        if (confirmPassword === "") {
            layer.msg('请输入确认密码');
            return false;
        }

        if (newPassword !== confirmPassword) {
            layer.msg('两次输入的密码不相同');
            return false;
        }


        PostWebApi("updatePassword", {
            personnelId: personnelId,
            oldPassword: oldPassword,
            newPassword: newPassword
        }).done(function (data) {
            if (data.code === 0) {
                layer.msg('修改成功');
                $("#oldPasswordUpdate").val("");
                $("#newPasswordUpdate").val("");
                $("#confirmPasswordUpdate").val("");
            } else {
                layer.msg(data.msg);
            }
        });
    });

</script>


</body>

</html>
